<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {getRequest, postPutRequest} from "@/api/data.ts";
import {useMessage} from 'naive-ui';
import Editor from '@components/Editor'

const message = useMessage()

const loadings = ref<boolean>(false);
const btnLoading = ref<boolean>(false);

const policyForm = ref({
  service: null,
  service_cont: '',
  privacy: null,
  privacy_cont: '',
  reg: null,
  reg_cont: '',
})

const handelSave = (e: MouseEvent) => {
  e.preventDefault();
  btnLoading.value = true;
  postPutRequest('conf/save_policy_a', policyForm.value).then((result: ResponseResult) => {
    if (result.code === 200) {
      message.success(result.message, {
        duration: 1500,
        onLeave() {
          btnLoading.value = false;
        }
      })
    } else {
      message.error(result.message);
      btnLoading.value = false;
    }
  })
}
//获取配置参数
const getSettings = async () => {
  await getRequest('conf/get_settings', {type: 'policy_a'}, true).then((result: ResponseResult) => {
    const {data} = result;
    const {policy_a} = JSON.parse(data);
    if (policy_a) {
      policyForm.value = {
        service: policy_a.service ?? null,
        service_cont: policy_a.service_cont ?? '',
        privacy: policy_a.privacy ?? null,
        privacy_cont: policy_a.privacy_cont ?? '',
        reg: policy_a.reg ?? null,
        reg_cont: policy_a.reg_cont ?? '',
      }
    }
    loadings.value = false;
  })
}

onMounted(() => {
  loadings.value = true;
  getSettings();
})
</script>

<template>
  <n-form
      ref="policy_a_form"
      :model="policyForm"
      require-mark-placement="left"
      label-placement="left" :label-width="110">
    <n-spin size="medium" v-model:show="loadings">
      <p><span class="titles">服务协议</span><span class="muted">用户登录注册页面显示服务协议</span></p>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="6" label="协议名称:" path="service">
          <n-input v-model:value="policyForm.service" placeholder="" clearable/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="24" label="协议内容:" path="service_cont">
          <editor v-model:value="policyForm.service_cont"/>
        </n-form-item-gi>
      </n-grid>
      <n-divider/>
      <p><span class="titles">隐私协议</span><span class="muted">用户登录注册页面显示隐私政策</span></p>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="6" label="协议名称:" path="privacy">
          <n-input v-model:value="policyForm.privacy" placeholder="" clearable/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="24" label="协议内容:" path="privacy_cont">
          <editor v-model:value="policyForm.privacy_cont"/>
        </n-form-item-gi>
      </n-grid>
      <n-divider/>
      <p><span class="titles">注销协议</span><span class="muted">用户注销页面显示注销协议</span></p>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="6" label="协议名称:" path="reg">
          <n-input v-model:value="policyForm.reg" placeholder="" clearable/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="24" label="协议内容:" path="reg_cont">
          <editor v-model:value="policyForm.reg_cont"/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="&nbsp;">
          <n-button type="primary" :loading="btnLoading"  @click="handelSave">保存协议设置</n-button>
        </n-form-item-gi>
      </n-grid>
    </n-spin>
  </n-form>
</template>

<style scoped lang="scss">
.muted {
  font-size: 12px;
  color: #999999;
  padding-left: 16px;
}
</style>